window.onload = function(){//先进行加载 不然得到的值为null
	var img = document.getElementById('imgs');//获取id
	var imges = img.getElementsByTagName('img');
	var lis = document.getElementById('nav');
	var lie = lis.getElementsByTagName('li');
	var spans = document.getElementById('prev');
	var span1 = document.getElementById('next');
	var container = document.getElementById('container');
	var indexs = 0 ;
	for(var i = 0 ; i < lie.length;i++){
		lie[i].index = i;
		indexs = this.index;
		lie[i].onmouseover = function(){
			//切换
			for(var j = 0 ; j < lie.length;j++){			
				
				lie[j].className = ''; 
				imges[j].className = '';
			}
			this.className = 'nav-selected';
			//改变 颜色
			imges[this.index].className = 'img1';//改变图片
		};
	}
	spans.onclick = function(){//上一张
		indexs--;
		if(indexs == -1){
			indexs = indexs.length-1;
		}
		for(var i = 0 ; i < lie.length;i++){
			lie[i].className = '';
			imges[i].className = '';
		}
		lie[indexs].className = 'nav-selected';
		imges[indexs].className = 'img1';
	}
	
	span1.onclick = function(){//下一张
		indexs++;
		if(indexs == 4){
			indexs = 0;
		}
		changeImg();
		/* for(var i = 0 ; i < lie.length;i++){
			lie[i].className = '';
			imges[i].className = '';
		}
		lie[indexs].className = 'nav-selected';
		imges[indexs].className = 'img1'; */
	}
	function changeImg(){
		for(var i = 0 ; i < lie.length;i++){
			lie[i].className = '';
			imges[i].className = '';
		}
		lie[indexs].className = 'nav-selected';
		imges[indexs].className = 'img1';
	}
	/* span1.onclick = spans.onclick = function(){
		if ( this === span1){
			index--;
			if(index == -1){
				index = lie.length - 1;
			} else {
				index++;
				if(index==lie.length){
					index = 0 ;
				}
			}
		}
		changeImg();
	} *///简洁的写法
	container.onmouseover() = function(){
		clearInterval(times);
	}
	container.onmouseout = function(){
		var times = setInterval(function(){
			spans.onclick();
		},1000)
	}
	var times = setInterval(function(){
		spans.onclick();
	},1000)
	//定时器
	setInterval(function(){
		indexs++;
		if(indexs==lie.length){
			indexs = 0 ;
		}
		changeImg();
	},1000)
	
}

